@import '../style/index.scss';

$skeleton-prefix-cls: #{$anna-prefix}-skeleton;

.#{$skeleton-prefix-cls} {
  &-container{
    padding: 20rpx 0;
    background-color: $view-bg-color;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    &-image{
      height: 750rpx;
      background-color: $btn-bg-color;
      margin-bottom: 30rpx;
    }
    &-avatar{
      margin: 0 20rpx;
      display: flex;
      margin-bottom: 30rpx;
      &-left{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: $btn-bg-color;
        margin-right: 30rpx;
      }
      &-right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        &-text{
          height: 32rpx;
          background-color: $btn-bg-color;
          margin-bottom: 30rpx;
          &:nth-last-child(1){
            margin-bottom: 0;
          }
        }
      }
    }
    &-title{
      margin-left: 20rpx;
      height: 32rpx;
      width: 300rpx;
      background-color: $btn-bg-color;
      margin-bottom: 30rpx;
    }
    &-row{
      margin: 0 20rpx;
      height: 32rpx;
      background-color: $btn-bg-color;
      margin-bottom: 30rpx;
    }
  }
  
  &-container_active{ // activeClass必须放到后面
    visibility: hidden;
    opacity: 0;
  }

  &-child_container{
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  &-child_container_active{
    visibility: visible;
    opacity: 1;
  }

  &-active{
    background: linear-gradient(90deg, $btn-bg-color 25%, $btn-bg-color-1 37%, $btn-bg-color 63%);
    background-size: 400% 100%;
    animation: ant-skeleton-loading 1.4s ease infinite;
  }
  
  @keyframes ant-skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}


